<script setup lang="tsx">
import { tableColumns } from "@/pages/serve/project/constants";
import { ref} from 'vue';
import {  MessagePlugin } from 'tdesign-vue-next';

//1.TableList组件对外的props
const props = defineProps({
  tableDataProp: {
    type: Array,
    default: () => []
 },
 totalProp: {
   type: Number,
   default: 0
 }
})
//2.TableList组件对外的events
const emits = defineEmits(['handleDeleteEmit', 'openDialogEmit', 'handleStatusEmit','onPageChangeEmit'])
const handleDelete = (id) => {
  emits('handleDeleteEmit', id)
  MessagePlugin.success('删除成功')
}
const openDialog = (id) => {
  emits('openDialogEmit', id)
}
const handleStatus = (row) => {
  emits('handleStatusEmit', row)
}
const onPageChange = (pageInfo) => {
  paginationParams.value.pageNum = pageInfo.current
  paginationParams.value.pageSize = pageInfo.pageSize
  emits('onPageChangeEmit', pageInfo)
}
//3.TableList组件对内的属性
const paginationParams =ref ({
  pageNum: 1,
  pageSize: 10
});

//4.TableList组件对内的属性

</script>

<template>
  <t-table :data="tableDataProp" :columns="tableColumns" row-key="property">
        <!-- 插槽方式 自定义单元格：cell 的值为插槽名称，参数有：{col, colIndex, row, rowIndex}  -->
        <!-- 序号单元格处理 -->
        <template #rowIndex="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
        <!-- 护理图片单元格 -->
        <template #image="{ row }">
          <div class="tdesign-demo-image-viewer__base">
            <t-image-viewer :images="[row.image]">
              <template #trigger="{ open }">
                <div class="tdesign-demo-image-viewer__ui-image">
                  <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                  <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                    <span>
                      <BrowseIcon size="1.4em" /> 预览
                    </span>
                  </div>
                </div>
              </template>
            </t-image-viewer>
          </div>
        </template>
        <!-- 价格 单元格处理 -->
        <template #price="{ row }">
          {{ row.price ? row.price.toFixed(2) : row.price }}
        </template>

        <!-- 操作单元格处理  -->
        <template #op="{ row }">
          <div class="operateCon">
            <t-popconfirm theme="warning" @confirm="handleDelete(row.id)">
              <template #content>
                <p class="title">确认删除</p>
                <p class="describe">此操作将删除该护理项目,是否继续?</p>
              </template>
              <a :class="row.count > 0 ? 'btn-dl disabled' : 'btn-dl'">删除</a>
            </t-popconfirm>
            <a :class="row.count > 0 ? 'font-bt disabled' : 'font-bt'" @click="openDialog(row.id)">编辑</a>
            <t-popconfirm theme="default" @confirm="handleStatus(row)">
              <template #content>
                <p class="title">禁用</p>
                <p class="describe">此操作将会禁用该项目，是否继续</p>
              </template>
              <a :class="row.count > 0 ? 'btn-dl disabled' : 'btn-dl'">{{ row.status === 0 ?
                '启用' : '禁用' }}</a>
            </t-popconfirm>
          </div>
        </template> 
      </t-table>
      <t-pagination
       v-model="paginationParams.pageNum"
        v-model:pageSize="paginationParams.pageSize"
        :total="totalProp"
       @change="onPageChange"
      />
</template>
<style scoped>
</style>
